/* eslint-disable react-hooks/exhaustive-deps */
/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-09 17:52:13
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-09 18:10:35
 */
import React, { useState, useEffect, useRef } from 'react'

const TimeCount = () => {
  const [count, setCount] = useState(10)
  let timeId = useRef(null)
  // let timeId = null
  useEffect(() => {
    // console.log(111)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    timeId.current = setInterval(() => {
      // timeId = setInterval(() => {
      console.log(123)
      // setCount(count - 1)  // count始终是初始值
      setCount((count) => {
        //  count跟初始值10没有关系，市中获取的是上一次的值
        // console.log(count, 88)
        return count - 1
      })
    }, 1000)
  }, [])
  const handle = () => {
    // clearInterval(timeId)
    clearInterval(timeId.current)
  }
  return (
    <div>
      御剑乘风来,除魔天地间!==TimeCount===={count}
      <button onClick={handle}>定时器</button>
    </div>
  )
}
export default TimeCount
